<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
	<th:block th:include="include :: header('选择规格')" />
	<!--<th:block th:include="include :: datetimepicker-css" />-->
</head>
<style>
	.btn-select{
		background-color: #1ab394;
		border-color: #1ab394;
		color: #FFFFFF;
	}
</style>
<body class="white-bg">
	<div class="wrapper wrapper-content animated fadeInRight ibox-content">
		<div id="dialogSpec" >

			<div class="modal-body">
				<div class="row">
					<div class="col-xs-12">
						<!--<span th:each="spec : ${goodsSpec}" >
											<input type="radio" th:value="${spec.id}" name="brand" value="">
											<span th:text="${spec.name}"></span>
						</span>-->
						<span class="col-xs-6" style="padding: 10px 0;display: inline-block;width: 45%"
							  th:each="spec : ${goodsSpec}" >
										<input type="radio" th:value="${spec.id}" name="brand" value="">
										<span th:text="${spec.name}"></span>
					</span>
					</div>
					<div class="col-xs-12" style="padding-top: 20px;">
						<div id="specList"></div>
					</div>
				</div>
			</div>
			<div class="modal-footer" style="margin-top: 40px; text-align: center">
				<button id="dialogSpecOK" style="padding: 3px 10px" type="button" class="btn btn-primary" data-loading-text="确定...">确定</button>
			</div>

		</div>
	</div>


	<th:block th:include="include :: footer" />
	<script type="text/javascript">
        $(document).ready(function () {
            $("#dialogSpecOK").on("click",function(){
                var spec=$("#dialogSpec input[type=radio]:checked").val();
                var text=$("#dialogSpec input[type=radio]:checked + span").text();
                if(spec){
                    if($("#specList").find(".btn-select").length<1){
                        layer.alert("请选择一个规格值");
                        return false;
                    }
                    var ok=true;
                    parent.$("#specTab").find("input[name='specId']").each(function(){
                        if(spec==$(this).val()){
                            layer.alert("规格已存在");
                            ok=false;
                        }
                    });
                    if(ok){
                        var specValIds = "";
                        var specValText = "";
                        var specValUrl = "";
                        $("#specList").find("button").each(function () {
                            if ($(this).hasClass("btn-select")) {
                                specValIds += $(this).attr("data-id") + ",";
                                specValUrl += $(this).attr("data-url") + ",";
                                specValText += $(this).text() + ",";
                            }
                        });
                        var str =
                            '<tr align="center"><td height="45">' +
                            '<input type="hidden" name="specId" class="form-control" value="'+spec+'"><div class="specName">'+text+'</div></td>' +
                            '<td><input type="hidden" name="specValIds" class="form-control" value="'+specValIds+'"><input type="hidden" name="specValUrl" class="form-control" value="'+specValUrl+'"><input name="specValText" class="form-control" style="width: 300px;" readonly value="'+specValText+'"></td>' +
                            '<td width="2"></td>' +
                            '<td><i class="up fa fa-arrow-up" style="cursor:pointer;padding: 5px;" title="向上移动"></i>' +
                            '<i class="down fa fa-arrow-down" style="cursor:pointer;padding: 5px;" title="向下移动"></i>' +
                            '<i class="del fa fa-remove" style="cursor:pointer;padding: 5px;" title="删除"></i></td></tr>';
                        parent.loadSpec(str);
                        var index = parent.layer.getFrameIndex(window.name); // 鑾峰彇绐楀彛绱㈠紩
                        parent.layer.close(index);
                    }
                }else{
                    layer.alert("请选择一个规格");
                }
            });
            // $("#dialogSpec").modal("show");
            $("#specList ").unbind("click").on("click","button",function(){
                if($(this).hasClass("btn-default")){
                    $(this).removeClass("btn-default");
                    $(this).addClass("btn-select")
                }else if($(this).hasClass("btn-select")){
                    $(this).removeClass("btn-select");
                    $(this).addClass("btn-default")
                }
            });
            $("#dialogSpec input[type=radio]").on("click",function(){
                console.log($(this).val());
                console.log(2222);
                $.post(ctx+"/system/spec/specVal"  , {"id":$(this).val()}, function (data) {

                    // console.log(1111);
                    // console.log(data);
                    if(data.code==0){
                        var str="";
                        $.each(data.data,function(idx,o){

                            // var url=o.spec_picurl||'';
                            str+='<button type="button" style="border: 1px solid #666;width: 50px; padding: 5px;" class="btn btn-default btn-sm"   data-id="'+o.id+'">'+ o.value+'</button> ';
                        });
                        // console.log(str);
                        $("#specList").html(str);
                    }else{
                        alert(data.msg);
                    }
                }, "json");
            });
        });
	</script>

</body>
</html>
